(function(){
    // 1. 准备数据
  let arr = [
    {
      title: "故障设备监控",
      subTitle: [
        "故障时间",
        "设备地址",
        "异常代码"
      ],
      contentArr: [
        {
          time: "20150102",
          address: "北京市昌平西路金燕龙写字楼",
          code: 100001
        },
        {
          time: "20151215",
          address: "北京市海淀区上地大厦",
          code: 100022
        },
        {
          time: "20160322",
          address: "天津市滨海新区互联网大厦",
          code: 100103
        },
        {
          time: "20161012",
          address: "广州市南沙区可爱路",
          code: 100704
        },
        {
          time: "20170611",
          address: "深圳市盐田区五道口大街",
          code: 103205
        },
        {
          time: "20181112",
          address: "上海市宝山区南大街22号",
          code: 100008
        },
        {
          time: "20180520",
          address: "天津市市区梅花大厦",
          code: 100011
        },
        {
          time: "20190914",
          address: "北京市朝阳区人民写字楼",
          code: 100025
        },
        {
          time: "20201102",
          address: "北京市东城区公园",
          code: 100301
        },
        {
          time: "20201103",
          address: "石家庄市桥西区大龙写字楼",
          code: 105001
        }
      ]
    },
    {
      title: "异常设备监控",
      subTitle: [
        "异常时间",
        "地址",
        "代码"
      ],
      contentArr: [
        {
          time: "20201103",
          address: "石家庄市桥西区大龙写字楼",
          code: 105001
        },
        {
          time: "20160322",
          address: "天津市滨海新区互联网大厦",
          code: 100103
        },
        {
          time: "20170611",
          address: "深圳市盐田区五道口大街",
          code: 103205
        },
        {
          time: "20151215",
          address: "北京市海淀区上地大厦",
          code: 100022
        },
        {
          time: "20181112",
          address: "上海市宝山区南大街22号",
          code: 100008
        },
        {
          time: "20180520",
          address: "天津市市区梅花大厦",
          code: 100011
        },
        {
          time: "20190914",
          address: "北京市朝阳区人民写字楼",
          code: 100025
        },
        {
          time: "20150102",
          address: "北京市昌平西路金燕龙写字楼",
          code: 100001
        },
        {
          time: "20201102",
          address: "北京市东城区公园",
          code: 100301
        },
        {
          time: "20161012",
          address: "广州市南沙区可爱路",
          code: 100704
        }
      ]
    }
  ];
  arr.forEach((obj,index)=>{
      let theA = `<a href="javascript:;" data-index="${index}" class="${index===0?'active':''}">${obj.title}</a>`
$('.monitor .tabs').append(theA)
//拿到选中的下标内容
if(index===0){
forArr(index)
}

function forArr(index){
    let obj=arr[index]
    $('.content .head').empty()
    $('.content .marquee').empty()
    obj.subTitle.forEach(str=>{
        let theSpan=`<span class="col">${str}</span>`
        $('.content .head').append(theSpan)
    })
    obj.contentArr.forEach(creDiv=>{
        let theDiv=`<div class="row">
        <span class="col">${creDiv.time}</span>
        <span class="col">${creDiv.address}</span>
        <span class="col">${creDiv.code}</span>
        <span class="icon-dot"></span>
    </div>`
    $('.content .marquee').append(theDiv)
    })
    let cloneDiv=$('.content .marquee div').clone()
    $('.content .marquee').append(cloneDiv)
}

$('.monitor .tabs a').on('click',function(){
    $(this).addClass('active').siblings().removeClass('active')
    let index=$(this).index()
    forArr(index)
})

  })


})()
// let theDiv = `<div class="row">
// <span class="col">20180701</span>
// <span class="col">11北京市昌平西路金燕龙写字楼</span>
// <span class="col">1000001</span>
// <span class="icon-dot"></span>
// </div>`